<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <title>聊天记录</title>
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/admin/css/history.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2321976_tf2ed0yzot.css">
    <style>
        .container-fluid{
            padding-top:20px;
        }
        .customer pre{
            color:#fff;
        }
        .m7_content{
            top:30px;
            border-top:#ccc solid 1px;
        }
        .userinfo{
            line-height:30px;
            font-size:1.2rem;
            padding:0px 15px;
            height:30px;
        }
        .userinfo a{ margin-right:5px; }
        #nick{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="userinfo">
    {$nick}
    {if $is_export === true}
    <a href="javascript:;" id="export" target="_self">导出记录</a>
    {/if}
    <a href="javascript:;" id="logout" target="_self">注销</a>
</div>
<div class="chatcontainer">
    <input type="hidden" id="cuid" value=""/>
    <div class="qimo_content mobileChat">
        <div class="m7_content recommend_height" id="wrap">
            <ul class="conversation is_robot" id="histStart" page="1" sw="on">
                <li class="showtime none">
                    <a id="show-more" class="we_im_info">加载更多信息</a>
                </li>
                <li class="showtime msg"></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/cookie.min.js"></script>
<script type="text/javascript" src="/static/common/layer35/layer.js"></script>
<script>
    $(function () {
        loadMessageHistory('bottom');
        /**
         * 加载更多
         */
        $('.showtime #show-more').click(function() {
            loadMessageHistory('top');
        });

        $("#pass").on('click',function(){
            layer.prompt({title: '请输入当前密码', formType: 1 }, function(value, index){
                layer.prompt({title:'请输入新密码',formType: 1 },function(v,i){
                    $.post('{:addons_url("authusers/Index/pass")}',{ouserpass:value,userpass:v,id:"{$uid}"},function(data){
                        if( data.code != 200 ){
                            layer.msg(data.data);
                        }else{
                            layer.msg('修改成功');
                            layer.close(index);
                            layer.close(i);
                        }
                    })
                });

            });
        });

        $("#logout").on('click',function(){
            var index = layer.confirm('您确定要退出吗?',function(){
                $.get('{:url("members/Index/logout")}',{sid:"{$sid ?? ''}"},function(data,status){
                    parent.location.reload();
                    layer.close(index);
                })
            })
        })
    });

    $("#export").on('click',function(){
        var url = '{:addons_url("exportrecords://Index/export")}' ;
        var downurl = url+'?fromid={$fromid}&toid='+parent.getParentCuid();
        layer.open({
            title:'导出聊天记录',
            type: 2,
            area: ['200px', '300px'],
            content:downurl
        });
    })

    function loadMessageHistory(direction) {
        var hist = $('#histStart');
        var load_page = parseInt(hist.attr('page'));
        var more = $('#show-more').parent();
        if (hist.attr('sw') == 'off') {
            more.html('没有消息了');
            return;
        }
        $.ajax({
            type: "post",
            url: "{:url('members/Index/records')}",
            data: {
                fromid: "{$fromid}",
                toid: parent.getParentCuid ? parent.getParentCuid() : "{$toid}",
                page: load_page,
            },
            dataType: "json",
            error:function(d){
                console.log('error');
            },
            success: function (r) {
                console.log(r);
                if (r.code == 200) {
                    var message = "";
                    more.removeClass('none');
                    $.each(r.data, function (index, item) {
                        if (item.utype == 'say_to') {
                            message += '<li class="chatmsg out deal">'+
                                '<div class="user-avatar-left">'+
                                '<img src="' + item.send_avatar + '" />'+
                                '</div>'+
                                '<p class="service-name">' + item.send_nick + '<span class="agentMsgTime">' + getLocalTime(item.send_time) + '</span></p>'+
                                '<div class="outer-left">'+
                                '<div class="service">'+
                                '<pre class="robot_text_msg">' + item.content + '</pre>'+
                                '</div>'+
                                '</div>'+
                                '</li>';
                        } else {
                            message += '<li class="chatmsg">'+
                                '<p class="customerMsgTime">我</p>'+
                                '<div class="outer-right">'+
                                '<div class="customer">'+
                                '<pre class="robot_text_msg">' + item.content + '</pre>'+
                                '</div>'+
                                '</div>'+
                                '<div class="user-avatar-right">'+
                                '<img src="' + item.send_avatar + '" />'+
                                '</div>'+
                                '</li>';
                        }
                    });
                    if (direction == 'bottom') {
                        $('#histStart').append(message);
                        scrollTopfooter();
                    } else {
                        more.after(message);
                    }
                    load_page++;
                    hist.attr('page', load_page);
                    if (r.data.length < 10) {
                        hist.attr('sw', 'off');
                    } else {
                        hist.attr('sw', 'on');
                    }

                } else {
                    hist.attr('sw', 'off');
                }
            }
        });
    }

    if (!String.prototype.padStart) {
        String.prototype.padStart = function padStart(targetLength, padString) {
            targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
            padString = String(typeof padString !== 'undefined' ? padString : ' ');
            if (this.length > targetLength) {
                return String(this);
            } else {
                targetLength = targetLength - this.length;
                if (targetLength > padString.length) {
                    padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                }
                return padString.slice(0, targetLength) + String(this);
            }
        };
    }

    function getLocalTime(time_stamp) {
        const time = new Date(time_stamp * 1000);
        const h = time.getHours().toString().padStart(2, '0')
        const m = time.getMinutes().toString().padStart(2, '0')
        const s = time.getSeconds().toString().padStart(2, '0')
        return h+':'+m+':'+s;
    }

    function scrollTopfooter() {
        // 到底部
        setTimeout(function() {
            $('#wrap').scrollTop($("#wrap")[0].scrollHeight);
        },100);
    }

</script>
</body>
</html>
